<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '详情',
  },
}
</route>
<template>
  <view class="bg-#fff overflow-auto w-100% h-screen box-border">
    <view style="position: relative">
      <view class="swiper-container">
        <swiper
          v-if="list.fileDOList && list.fileDOList.length != 0"
          indicator-dots
          circular
          autoplay
        >
          <swiper-item v-for="(item, index) in list.fileDOList" :key="index">
            <image class="w-100% h-446rpx" :src="item.url"></image>
          </swiper-item>
        </swiper>
        <view
          v-else
          class="w-100% h-446rpx"
          style="
            font-size: 28rpx;
            line-height: 446rpx;
            color: #333333;
            text-align: center;
            background-color: #f6f6f6;
          "
        >
          暂无图片
        </view>
      </view>
      <view class="bg-#fff w-100% p-30rpx box-border detail-card">
        <view class="pb-20rpx" style="border-bottom: 1px solid #ccc">
          <view class="flex mb-20rpx mt--6rpx items-center">
            <view class="mr-14rpx ml--6rpx">
              <img class="w-120rpx h-120rpx" src="../../static/images/detailUser.png" />
            </view>
            <view>
              <view class="text-32rpx mb-10rpx color-#101010">{{ list.creator }}</view>
              <view class="text-28rpx color-#303030">{{ list.role }}</view>
            </view>
          </view>
          <view class="flex" style="flex-wrap: wrap">
            <view class="mr-14rpx mb-14rpx" v-for="(item, index) in list.tag" :key="index">
              <wd-tag
                style="min-width: 80rpx; text-align: center"
                color="#F72323"
                bg-color="#EE2A02"
                plain
              >
                {{ item }}
              </wd-tag>
            </view>
          </view>
          <view class="flex justify-between mt-4rpx items-center">
            <view>
              <span class="per-money mr-4rpx">{{ list.quantity }}</span>
              <span class="per-capita">Kg</span>
            </view>
            <view class="createtime">
              <span>发布于</span>
              <span>{{ formatTime(list.createTime, 'yyyy年MM月dd日 HH:mm:ss') }}</span>
            </view>
          </view>
        </view>
        <view class="mb-100rpx mt-20rpx" @click="handleHear(list.remark)">
          <view class="flex h-48rpx">
            <wd-icon name="sound" size="24px" color=" #e66a13"></wd-icon>
            <view class="card-title">点击听文</view>
          </view>
          <view class="detail-content mt-12rpx">
            {{ list.remark }}
          </view>
        </view>
      </view>
    </view>
    <view class="footer_cont">
      <view class="footer flex justify-end mx-30rpx">
        <view class="flex mr-30rpx">
          <wd-icon name="jump" size="26px" color="#888888"></wd-icon>
          <view>{{ list.shareCount }}</view>
          <button open-type="share" style="position: absolute; height: 90rpx; opacity: 0">
            {{ list.shareCount }}
          </button>
        </view>
        <view class="flex" @click="addNumber" :class="{ selected: isActive }">
          <wd-icon name="thumb-up" size="26px"></wd-icon>
          <view>{{ list.likeCount }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import * as getApi from '../../service/FruitMarket/index'
import { useToast } from 'wot-design-uni'
import { formatTime } from '@/utils/index'
const toast = useToast()
const list = ref([])
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
// 转发
const relayPage = async () => {
  const params = {
    id: freshFruitId.value,
    type: 2,
  }
  const data = await getApi.sharefreshFruit({ ...params })
  // console.log(data)
  if (data.data) {
    getFreshFruit()
  }
}
onShareAppMessage((res) => {
  if (res.from === 'button') {
    // 来自页面内分享按钮
    // console.log(res.target)
    relayPage()
    // console.log('🚀打印:', `/pages/FruitMarket/productDetails?id=${freshFruitId.value}`)
  }
  return {
    title: '鲜果详情',
    path: `/pages/FruitMarket/productDetails?id=${freshFruitId.value}`,
  }
})
const isActive = ref(0)
const freshFruitId = ref(0)
// 点赞
const addNumber = async () => {
  if (isActive.value === 0) {
    isActive.value = 1
    const params = {
      id: freshFruitId.value,
      type: 1,
    }
    const data = await getApi.sharefreshFruit({ ...params })
    if (data.data) {
      // toast.success('点赞成功！')
      getFreshFruit()
    }
  } else {
    isActive.value = 0
  }
}
// 获得特色鲜果详情
async function getFreshFruit() {
  const data: any = await getApi.getfreshFruitdetail(freshFruitId.value)
  list.value = data.data
  if (data.data.tag) {
    list.value.tag = list.value.tag.split(',')
  }
  if (data.data.fileDOList) {
    list.value.fileDOList = list.value.fileDOList.reverse().map((item) => {
      item.url = `${baseurl.value}${item.url}`
      return item
    })
  }
}
// 点击听文
const isPlaying = ref(false)
const plugin = requirePlugin('WechatSI')
const manager = plugin.getRecordRecognitionManager()
let music = null
const handleHear = (text) => {
  if (isPlaying.value) {
    uni.showToast({
      title: '正在播放中...',
      icon: 'none',
    })
    return
  }
  isPlaying.value = true
  plugin.textToSpeech({
    lang: 'zh_CN',
    tts: true,
    content: text,
    success: function (res) {
      music = uni.createInnerAudioContext()
      music.src = res.filename // 设置音频源
      music.play() // 开始播放
      music.onEnded(() => {
        music = null
        isPlaying.value = false
      })
    },
    fail: function (err) {
      // 处理失败情况
      console.log('Text-to-speech failed:', err)
    },
  })
}

onLoad(async (options) => {
  freshFruitId.value = Number(options.id)
  getFreshFruit()
})
onUnload(() => {
  if (music) {
    music.stop()
    music = null
    isPlaying.value = false
  }
})
</script>
<style scoped>
::v-deep .wd-tag__text {
  display: block !important;
  min-height: 19px;
  padding-right: 8rpx !important;
  padding-left: 8rpx !important;
  line-height: 19px;
}
::v-deep .wd-tag {
  display: block !important;
  font-size: 24rpx !important;
  border-radius: 8rpx;
}
.createtime {
  font-size: 28rpx;
  color: #7f7f7f;
  text-align: justify;
}
.swiper-container {
  width: 100%;
  height: 446rpx;
}
.detail-content {
  font-size: 32rpx;
  line-height: 46rpx;
  color: #3a3a3a;
  text-align: justify;
}
.detail-card {
  position: relative;
  width: 100%;
  margin: 0 !important;
}
.card-title {
  margin-left: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 48rpx;
  color: #e66a13;
  text-align: left;
}
.per-money {
  font-size: 36rpx;
  font-weight: 500;
  color: #f72323;
  text-align: left;
}
.per-capita {
  font-size: 26rpx;
  font-weight: 500;
  color: #303030;
  text-align: left;
}
.footer_cont {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0px -3px 6px 0px rgba(201, 201, 201, 0.4);
}
.footer {
  height: 90rpx;
  font-size: 32rpx;
  line-height: 90rpx;
  color: #888888;
  text-align: center;
}
.selected {
  color: #e66a13 !important;
}
</style>
